<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>个人中心 - 优选商城</title>
    <style th:fragment="style">
        .profile-sidebar .nav-link {
            color: #333;
            padding: 0.8rem 1rem;
        }
        .profile-sidebar .nav-link.active {
            background-color: #f8f9fa;
            color: #0d6efd;
        }
        .profile-sidebar .nav-link:hover {
            background-color: #f8f9fa;
        }
        .address-card {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .address-card .default-badge {
            background-color: #0d6efd;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }
        /* 加载动画 */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .loading-spinner {
            width: 3rem;
            height: 3rem;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container my-4">
            <div class="row">
                <!-- 左侧导航 -->
                <div class="col-md-3">
                    <div class="card profile-sidebar">
                        <div class="card-body p-0">
                            <div class="nav flex-column">
                                <a class="nav-link" th:classappend="${active == 'profile' ? 'active' : ''}" href="/user/profile">
                                    <i class="bi bi-person me-2"></i>个人资料
                                </a>
                                <a class="nav-link" th:classappend="${active == 'address' ? 'active' : ''}" href="/user/profile?active=address">
                                    <i class="bi bi-geo-alt me-2"></i>收货地址
                                </a>
                                <a class="nav-link" th:classappend="${active == 'orders' ? 'active' : ''}" href="/user/profile?active=orders">
                                    <i class="bi bi-bag me-2"></i>我的订单
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧内容 -->
                <div class="col-md-9">
                    <!-- 个人资料 -->
                    <div th:if="${active == 'profile'}" class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-4">个人资料</h5>
                            <form th:action="@{/user/profile/update}" method="post" enctype="multipart/form-data">
                                <div class="row mb-3">
                                    <div class="col-md-3 text-center">
                                        <img th:if="${user.avatar != null}" th:src="${user.avatar}" 
                                             class="rounded-circle mb-2" style="width: 100px; height: 100px; object-fit: cover;"
                                             alt="用户头像">
                                        <img th:unless="${user.avatar != null}" 
                                             src="https://via.placeholder.com/100" 
                                             class="rounded-circle mb-2" style="width: 100px; height: 100px; object-fit: cover;"
                                             alt="默认头像">
                                        <div>
                                            <input type="file" class="form-control" name="avatar" accept="image/*">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label class="form-label">用户名</label>
                                            <input type="text" class="form-control" th:value="${user.username}" readonly>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">昵称</label>
                                            <input type="text" class="form-control" name="nickname" th:value="${user.nickname}">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">手机号</label>
                                            <input type="tel" class="form-control" name="phone" th:value="${user.phone}">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">邮箱</label>
                                            <input type="email" class="form-control" name="email" th:value="${user.email}">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">性别</label>
                                            <select class="form-select" name="gender">
                                                <option value="0" th:selected="${user.gender == 0}">未知</option>
                                                <option value="1" th:selected="${user.gender == 1}">男</option>
                                                <option value="2" th:selected="${user.gender == 2}">女</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary">保存修改</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 收货地址 -->
                    <div th:if="${active == 'address'}" class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title mb-0">收货地址</h5>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                    <i class="bi bi-plus-lg me-1"></i>新增地址
                                </button>
                            </div>
                            
                            <!-- 地址列表 -->
                            <div class="address-list">
                                <div th:each="address : ${addresses}" class="address-card">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="me-2" th:text="${address.receiver}">收货人</span>
                                            <span th:text="${address.phone}">手机号</span>
                                            <span th:if="${address.isDefault == 1}" class="default-badge ms-2">默认</span>
                                        </div>
                                        <div>
                                            <button class="btn btn-sm btn-outline-primary me-2 edit-address-btn" 
                                                    th:data-address-id="${address.id}">
                                                编辑
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger me-2 delete-address-btn" 
                                                    th:data-address-id="${address.id}">
                                                删除
                                            </button>
                                            <button class="btn btn-sm btn-outline-success set-default-btn"
                                                    th:if="${address.isDefault != 1}"
                                                    th:data-address-id="${address.id}">
                                                设为默认
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mt-2 text-muted" th:text="${address.province + address.city + address.district + address.detail}">
                                        详细地址
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 我的订单 -->
                    <div th:if="${active == 'orders'}" class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-4">我的订单</h5>
                            
                            <!-- 订单状态筛选 -->
                            <ul class="nav nav-pills mb-4">
                                <li class="nav-item">
                                    <a class="nav-link" th:classappend="${status == null ? 'active' : ''}" href="/user/profile?active=orders">全部订单</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:classappend="${status == 10 ? 'active' : ''}" href="/user/profile?active=orders&status=10">待付款</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:classappend="${status == 20 ? 'active' : ''}" href="/user/profile?active=orders&status=20">待发货</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:classappend="${status == 30 ? 'active' : ''}" href="/user/profile?active=orders&status=30">待收货</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:classappend="${status == 40 ? 'active' : ''}" href="/user/profile?active=orders&status=40">已完成</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:classappend="${status == 50 ? 'active' : ''}" href="/user/profile?active=orders&status=50">已取消</a>
                                </li>
                            </ul>
                            
                            <!-- 订单列表 -->
                            <div th:if="${orderPage != null && !orderPage.records.empty}">
                                <!-- 订单卡片列表 -->
                                <div class="card mb-3" th:each="order : ${orderPage.records}">
                                    <div class="card-header bg-white">
                                        <div class="row align-items-center">
                                            <div class="col-md-6">
                                                <span class="text-muted">订单号：</span>
                                                <span th:text="${order.orderNo}">202506080000000000</span>
                                            </div>
                                            <div class="col-md-3">
                                                <span class="text-muted">下单时间：</span>
                                                <span th:text="${order.createTime != null ? #temporals.format(order.createTime, 'yyyy-MM-dd HH:mm') : '未知'}">2025-06-08 12:00</span>
                                            </div>
                                            <div class="col-md-3 text-end">
                                                <span th:class="${order.status == 10 ? 'badge bg-warning' : 
                                                           order.status == 20 ? 'badge bg-info' : 
                                                           order.status == 30 ? 'badge bg-primary' : 
                                                           order.status == 40 ? 'badge bg-success' : 
                                                           'badge bg-secondary'}"
                                                      th:text="${order.statusDesc}">
                                                    订单状态
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <!-- 订单商品 -->
                                        <div th:if="${order.orderItems != null && !order.orderItems.isEmpty()}">
                                            <div class="p-3 border-bottom" th:each="item : ${order.orderItems}">
                                                <div class="row align-items-center">
                                                    <div class="col-md-8">
                                                        <div class="d-flex align-items-center">
                                                            <img th:src="${item.productImage}" class="img-thumbnail me-3" 
                                                                 th:alt="${item.productName}" style="width: 60px; height: 60px; object-fit: cover;">
                                                            <div>
                                                                <h6 class="mb-1" th:text="${item.productName}">商品名称</h6>
                                                                <div class="small text-muted">
                                                                    <span th:text="${item.quantity}">1</span> x 
                                                                    ¥<span th:text="${#numbers.formatDecimal(item.currentPrice, 1, 2)}">0.00</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 text-end">
                                                        <div class="text-danger">
                                                            ¥<span th:text="${#numbers.formatDecimal(item.totalPrice, 1, 2)}">0.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 订单汇总 -->
                                        <div class="p-3 bg-light">
                                            <div class="row align-items-center">
                                                <div class="col-md-6">
                                                    <span class="text-muted">共</span>
                                                    <span th:text="${order.orderItems != null ? order.orderItems.size() : 0}">1</span>
                                                    <span class="text-muted">件商品，实付金额：</span>
                                                    <span class="text-danger fw-bold">¥<span th:text="${#numbers.formatDecimal(order.payment != null ? order.payment : 0, 1, 2)}">0.00</span></span>
                                                </div>
                                                <div class="col-md-6 text-end">
                                                    <!-- 订单操作按钮 -->
                                                    <a th:href="@{'/order/detail/' + ${order.orderNo}}" class="btn btn-outline-primary btn-sm">
                                                        查看详情
                                                    </a>
                                                    <a th:if="${order.status == 10}" th:href="@{'/order/pay/' + ${order.orderNo}}" class="btn btn-primary btn-sm ms-2">
                                                        去支付
                                                    </a>
                                                    <button th:if="${order.status == 10 || order.status == 20}" class="btn btn-outline-danger btn-sm ms-2 cancel-order-btn"
                                                            th:data-order-no="${order.orderNo}">
                                                        取消订单
                                                    </button>
                                                    <button th:if="${order.status == 30}" class="btn btn-success btn-sm ms-2 confirm-order-btn"
                                                            th:data-order-no="${order.orderNo}">
                                                        确认收货
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 分页 -->
                                <nav th:if="${orderPage != null && orderPage.pages > 1}" aria-label="Page navigation" class="mt-4">
                                    <div class="row align-items-center">
                                        <div class="col-md-6">
                                            <p class="mb-0">显示 <span th:text="${(orderPage.current-1) * orderPage.size + 1}">1</span> 到 
                                            <span th:text="${orderPage.current * orderPage.size > orderPage.total ? orderPage.total : orderPage.current * orderPage.size}">10</span> 
                                            条，共 <span th:text="${orderPage.total}">100</span> 条记录</p>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex justify-content-md-end align-items-center">
                                                <div class="me-3">
                                                    <select id="pageSizeSelector" class="form-select form-select-sm" style="width: auto;">
                                                        <option value="5" th:selected="${orderPage.size == 5}">5条/页</option>
                                                        <option value="10" th:selected="${orderPage.size == 10}">10条/页</option>
                                                        <option value="20" th:selected="${orderPage.size == 20}">20条/页</option>
                                                    </select>
                                                </div>
                                                <ul class="pagination pagination-sm mb-0">
                                        <li class="page-item" th:classappend="${orderPage.current == 1 ? 'disabled' : ''}">
                                                        <a class="page-link" th:href="@{/user/profile(active='orders', status=${status}, pageNum=${orderPage.current - 1}, pageSize=${orderPage.size})}" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                                    
                                                    <!-- 动态分页导航 -->
                                                    <th:block th:with="startPage=${T(Math).max(1, orderPage.current - 2)}, endPage=${T(Math).min(orderPage.pages, startPage + 4)}">
                                                        <!-- 如果开始页大于1，显示第1页 -->
                                                        <li class="page-item" th:if="${startPage > 1}">
                                                            <a class="page-link" th:href="@{/user/profile(active='orders', status=${status}, pageNum=1, pageSize=${orderPage.size})}">1</a>
                                                        </li>
                                                        <!-- 如果开始页大于2，显示省略号 -->
                                                        <li class="page-item disabled" th:if="${startPage > 2}">
                                                            <span class="page-link">...</span>
                                                        </li>
                                                        
                                                        <!-- 显示页码 -->
                                                        <li class="page-item" th:each="num : ${#numbers.sequence(startPage, endPage)}"
                                            th:classappend="${num == orderPage.current ? 'active' : ''}">
                                                            <a class="page-link" th:href="@{/user/profile(active='orders', status=${status}, pageNum=${num}, pageSize=${orderPage.size})}" th:text="${num}">1</a>
                                                        </li>
                                                        
                                                        <!-- 如果结束页小于总页数-1，显示省略号 -->
                                                        <li class="page-item disabled" th:if="${endPage < orderPage.pages - 1}">
                                                            <span class="page-link">...</span>
                                                        </li>
                                                        <!-- 如果结束页小于总页数，显示最后一页 -->
                                                        <li class="page-item" th:if="${endPage < orderPage.pages}">
                                                            <a class="page-link" th:href="@{/user/profile(active='orders', status=${status}, pageNum=${orderPage.pages}, pageSize=${orderPage.size})}" th:text="${orderPage.pages}">10</a>
                                        </li>
                                                    </th:block>
                                                    
                                        <li class="page-item" th:classappend="${orderPage.current == orderPage.pages ? 'disabled' : ''}">
                                                        <a class="page-link" th:href="@{/user/profile(active='orders', status=${status}, pageNum=${orderPage.current + 1}, pageSize=${orderPage.size})}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                            </div>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                            
                            <!-- 无订单提示 -->
                            <div th:if="${orderPage == null || orderPage.records.empty}" class="text-center py-5">
                                <i class="bi bi-inbox fs-1 text-muted"></i>
                                <p class="text-muted mt-3" th:text="${orderError != null ? orderError : '暂无订单记录'}">暂无订单记录</p>
                                <a href="/" class="btn btn-primary mt-2">去购物</a>
                            </div>
                            
                            <!-- 异常信息提示 -->
                            <div th:if="${orderError != null && (orderPage != null && !orderPage.records.empty)}" class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                <span th:text="${orderError}">处理订单时发生错误</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增地址模态框 -->
        <div class="modal fade" id="addAddressModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">新增收货地址</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addressForm" th:action="@{/user/address/add}" method="post">
                            <div class="mb-3">
                                <label class="form-label">收货人</label>
                                <input type="text" class="form-control" name="receiver" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">手机号</label>
                                <input type="tel" class="form-control" name="phone" required>
                            </div>
                            <div class="row mb-3">
                                <div class="col">
                                    <label class="form-label">省份</label>
                                    <input type="text" class="form-control" name="province" required>
                                </div>
                                <div class="col">
                                    <label class="form-label">城市</label>
                                    <input type="text" class="form-control" name="city" required>
                                </div>
                                <div class="col">
                                    <label class="form-label">区县</label>
                                    <input type="text" class="form-control" name="district" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">详细地址</label>
                                <textarea class="form-control" name="detail" rows="2" required></textarea>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="isDefault" value="1" id="isDefault">
                                    <label class="form-check-label" for="isDefault">设为默认地址（可选）</label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="addressForm" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除地址确认模态框 -->
        <div class="modal fade" id="deleteAddressModal" tabindex="-1" aria-labelledby="deleteAddressModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteAddressModalLabel">删除收货地址</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body">
                        确定要删除该收货地址吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteAddressBtn">确定删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner-border text-primary loading-spinner" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <script th:fragment="script">
        let addressToDeleteId = null;
        
        // 显示加载动画
        function showLoading() {
            const overlay = document.getElementById('loadingOverlay');
            if (overlay) {
                overlay.style.display = 'flex';
            }
        }
        
        // 隐藏加载动画
        function hideLoading() {
            const overlay = document.getElementById('loadingOverlay');
            if (overlay) {
                overlay.style.display = 'none';
            }
        }

        // 页面加载完成后初始化所有事件
        document.addEventListener('DOMContentLoaded', function() {
            // 隐藏加载动画
            hideLoading();
            
            // 初始化取消订单按钮
            document.querySelectorAll('.cancel-order-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const orderNo = this.getAttribute('data-order-no');
                    cancelOrder(orderNo);
                });
            });
            
            // 初始化确认收货按钮
            document.querySelectorAll('.confirm-order-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const orderNo = this.getAttribute('data-order-no');
                    confirmReceived(orderNo);
                });
            });
            
            // 初始化编辑地址按钮
            document.querySelectorAll('.edit-address-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const addressId = this.getAttribute('data-address-id');
                    editAddress(addressId);
                });
            });
            
            // 初始化删除地址按钮
            document.querySelectorAll('.delete-address-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const addressId = this.getAttribute('data-address-id');
                    deleteAddress(addressId);
                });
            });
            
            // 初始化设为默认地址按钮
            document.querySelectorAll('.set-default-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const addressId = this.getAttribute('data-address-id');
                    setDefaultAddress(addressId);
                });
            });
            
            // 初始化删除地址确认按钮
            const confirmBtn = document.getElementById('confirmDeleteAddressBtn');
            if (confirmBtn) {
                confirmBtn.onclick = function() {
                    if (addressToDeleteId) {
                        showLoading();
                        fetch('/user/address/delete/' + addressToDeleteId, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(response => {
                            hideLoading();
                            if (response.ok) {
                                window.location.reload();
                            } else {
                                showToast('删除失败，请重试', 'danger');
                            }
                        }).catch(error => {
                            hideLoading();
                            showToast('操作失败: ' + error.message, 'danger');
                        });
                    }
                }
            }
            
            // 初始化页面大小选择器
            const pageSizeSelector = document.getElementById('pageSizeSelector');
            if (pageSizeSelector) {
                pageSizeSelector.addEventListener('change', function() {
                    showLoading();
                    const pageSize = this.value;
                    const currentUrl = new URL(window.location.href);
                    currentUrl.searchParams.set('pageSize', pageSize);
                    currentUrl.searchParams.set('pageNum', '1'); // 切换每页显示数量时重置为第1页
                    window.location.href = currentUrl.toString();
                });
            }
            
            // 为所有分页链接添加加载动画
            document.querySelectorAll('.pagination .page-link').forEach(function(link) {
                link.addEventListener('click', function(e) {
                    if (!this.parentElement.classList.contains('disabled') && !this.parentElement.classList.contains('active')) {
                        showLoading();
                    }
                });
            });
            
            // 为所有导航标签页添加加载动画
            document.querySelectorAll('.nav-pills .nav-link').forEach(function(link) {
                link.addEventListener('click', function() {
                    showLoading();
                });
            });
        });

        // 取消订单
        function cancelOrder(orderNo) {
            if (!confirm('确定要取消该订单吗？')) {
                return;
            }
            
            showLoading();
            $.ajax({
                url: '/order/cancel',
                type: 'POST',
                data: { orderNo: orderNo },
                success: function(res) {
                    hideLoading();
                    if (res.code === 0) {
                        showToast('订单已取消', 'success');
                        setTimeout(function() {
                            showLoading();
                            window.location.reload();
                        }, 1500);
                    } else {
                        showToast(res.msg || '取消订单失败', 'danger');
                    }
                },
                error: function() {
                    hideLoading();
                    showToast('请求失败，请重试', 'danger');
                }
            });
        }
        
        // 确认收货
        function confirmReceived(orderNo) {
            if (!confirm('确认已收到商品吗？')) {
                return;
            }
            
            showLoading();
            $.ajax({
                url: '/user/order/confirm',
                type: 'POST',
                data: { orderNo: orderNo },
                success: function(res) {
                    hideLoading();
                    if (res.code === 0) {
                        showToast('确认收货成功', 'success');
                        setTimeout(function() {
                            showLoading();
                            window.location.reload();
                        }, 1500);
                    } else {
                        showToast(res.msg || '确认收货失败', 'danger');
                    }
                },
                error: function() {
                    hideLoading();
                    showToast('请求失败，请重试', 'danger');
                }
            });
        }

        // 删除地址
        function deleteAddress(id) {
            addressToDeleteId = id;
            var modal = new bootstrap.Modal(document.getElementById('deleteAddressModal'));
            modal.show();
        }
        
        // 设为默认地址
        function setDefaultAddress(id) {
            showLoading();
            $.ajax({
                url: '/user/address/set-default/' + id,
                type: 'POST',
                success: function(response) {
                    hideLoading();
                    if (response === 'success') {
                        showToast('设置默认地址成功', 'success');
                        setTimeout(function() {
                            showLoading();
                            window.location.reload();
                        }, 500);
                    } else {
                        showToast('设置默认地址失败，请重试', 'danger');
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading();
                    showToast('操作失败: ' + error, 'danger');
                    console.error('设置默认地址失败:', xhr, status, error);
                }
            });
        }

        // 编辑地址
        function editAddress(id) {
            // 实际项目中这里会加载地址详情并显示编辑表单
            alert('编辑地址功能未实现：' + id);
            // 此处简化处理，实际项目应该发送AJAX请求获取地址详情，然后填充到表单中
        }
        
        // 显示提示消息
        function showToast(message, type) {
            // 检查toast容器是否存在，不存在则创建一个
            let toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.className = 'toast-container';
                toastContainer.style.position = 'fixed';
                toastContainer.style.top = '20px';
                toastContainer.style.right = '20px';
                toastContainer.style.zIndex = '1050';
                document.body.appendChild(toastContainer);
            }
            
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'exclamation-circle'} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            
            bsToast.show();
            
            // 自动移除toast元素
            toast.addEventListener('hidden.bs.toast', function () {
                toast.remove();
            });
        }
    </script>
</body>
</html> 